<template>
	<view class="list">
		
		<button class="itembox getphone" v-if="role == 1" @click="goPage('/pages/mydoctors/mydoctors')" >
			<view class="title">
				<view class="icon">
					<text class="iconfont icontouxiang"></text>
				</view>
				<view class="name">
					我的医生
				</view>
			</view>
			
			<view class="jiantou">
				<text class="iconfont iconarrow-right"></text>
			</view>
		</button>
		
		<button class="itembox getphone" v-if="role == 2" @click="goPage('/pages/myusers/myusers')" >
			<view class="title">
				<view class="icon">
					<text class="iconfont icontouxiang"></text>
				</view>
				<view class="name">
					我的病人
				</view>
			</view>
			
			<view class="jiantou">
				<text class="iconfont iconarrow-right"></text>
			</view>
		</button>
		
		<view class="itembox" v-for="item in itemData" :key="item.route" @click="goPage(item.route)">
			<view class="title">
				<view class="icon">
					<text :class="item.icon"></text>
				</view>
				<view class="name">
					{{ item.name }}
				</view>
			</view>
			
			<view class="jiantou">
				<text class="iconfont iconarrow-right"></text>
			</view>
		</view>
		<button class="itembox getphone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >
			<view class="title">
				<view class="icon">
					<text class="iconfont iconshouji1"></text>
				</view>
				<view class="name">
					绑定手机
				</view>
			</view>
			
			<view class="jiantou">
				<text class="iconfont iconarrow-right"></text>
			</view>
		</button>
		
		<button class="itembox getphone" v-if="role == 1" >
			<view class="title">
				<view class="icon">
					<text class="iconfont iconrenzheng"></text>
				</view>
				<view class="name">
					医生认证
				</view>
			</view>
			
			<view class="jiantou">
				<text class="iconfont iconarrow-right"></text>
			</view>
		</button>
		
		<button class="itembox getphone" v-if="isfx == 2" @click="Join" >
			<view class="title">
				<view class="icon">
					<text class="iconfont iconkehuqunzu"></text>
				</view>
				<view class="name">
					加入分销
				</view>
			</view>
			
			<view class="jiantou">
				<text class="iconfont iconarrow-right"></text>
			</view>
		</button>
		
		<button class="itembox getphone" v-if="isfx == 1" @click="goPage('/pages/qrcode/qrcode')" >
			<view class="title">
				<view class="icon">
					<text class="iconfont iconerweima"></text>
				</view>
				<view class="name">
					我的二维码
				</view>
			</view>
			
			<view class="jiantou">
				<text class="iconfont iconarrow-right"></text>
			</view>
		</button>
		
		<button class="itembox getphone" v-if="isfx == 1" @click="goPage('/pages/address/address')" >
			<view class="title">
				<view class="icon">
					<text class="iconfont icondizhi"></text>
				</view>
				<view class="name">
					我的地址
				</view>
			</view>
			
			<view class="jiantou">
				<text class="iconfont iconarrow-right"></text>
			</view>
		</button>
		
		<!-- pop弹出层 -->
		<uni-popup ref="popup" type="bottom">
			<view class="pop">
				<view class="tip">
					 手机号码已绑定
				</view>
				<view class="phone">
					<text class="iconfont iconshouji1"></text> <view class="num">
						{{ UserInfo.phone }}
					</view>
				</view>
				<view class="btn">
					<button type="default" @click="closePop">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		data() {
			return {
				itemData: [
					// role 2  医生
					// { icon: "iconfont iconyonghu", name: "我的病人", route: "/pages/myusers/myusers" },
					// role 1 用户
					// { icon: "iconfont icontouxiang", name: "我的医生", route: "/pages/mydoctors/mydoctors"},
					
					{ icon: "iconfont icondangan-", name: "我的档案", route: "/pages/dangan/dangan"},
					{ icon: "iconfont iconrenminbicaiwuzhifu", name: "我的账户", route: "/pages/money/money"},
					{ icon: "iconfont icongouwucheman", name: "我的购物车", route: "/pages/shopcar/shopcar"},
					{ icon: "iconfont iconyouhuiquan", name: "我的优惠券", route: "/pages/youhuiquan/youhuiquan"},
					{ icon: "iconfont iconkefu", name: "联系客服", route: "/pages/kefu/kefu"},
					
				],
				secret_data: {},
				phone: "",
				UserInfo: {}
			}
		},
		components: {
			uniPopup
		},
		computed: {
			token() {
				return this.$store.state.token; 
			},
			sessionKey() {
				return this.$store.state.userData.session_key;
			},
			role() {
				return this.$store.state.UserInfo.role
			},
			isfx() {
				return this.$store.state.UserInfo.distribution
			},
		},
	
		mounted() {
			this.getUserInfo()
		},
		methods: {
			
			// 加入分享
			async Join() {
				let self = this
				uni.showModal({
					title:"加入分销",
					content: "加入分销后,发展会员,会员消费后可以获得佣金",
					showCancel:true,
					cancelText:"否",
					cancelColor:"red",
					confirmText:"是",
					confirmColor:"#007eff",
					async success(res) {
						if(!res.cancel) {
							let res = await self.$Request("/admin/joinfenxiao","", self.token)
							let code = res.data.code 
							if(code == 204) {
								uni.showToast({
									title: "加入成功",
									icon: "success",
									duration: 2000
								})
								self.getUserInfo()
							}
						}
					}
				})
				
			},
		
			// 获取用户手机号码
			async getPhoneNumber(data) {
				if(this.UserInfo.phone) {
					// console.log(1);
					this.$refs.popup.open()
				} else {
					let formdata = data.detail 
					formdata.sessionKey = this.sessionKey
					let res = await this.$Request("/port/getSecretData", formdata, this.token)
					let code = res.data.code
					if(code == 200) {
						this.phone = res.data.data.phoneNumber
						let save = await this.$Request("/admin/savePhone",{ phone: this.phone }, this.token)
						// console.log(save);
						this.$emit("update")
					}
				}
			},
			// 使用token 获取用户信息
			async getUserInfo() {
				if(this.token) {
					let res = await this.$Request("/admin/getMemberData", "", this.token)
					//console.log(res);
					let code = res.data.code 
					if(code == 200) {
						this.UserInfo = res.data.data
						this.$store.commit("getUserInfo", this.UserInfo)
					}
				}
			}, 
			
			// 关闭pop
			closePop() {
				this.$refs.popup.close()
			},
			
			// 点击跳转路由
			goPage( route ) {
				console.log(route);
				uni.navigateTo({
					url: route,
					success( res ) {
						console.log("suiccess");
					},
					fail(err) {
						console.log(err);
					}
				})
			},
		},
		
	}
</script>

<style scoped lang="scss">
	.list {
		width: 100%;
		box-sizing: border-box;
		.getphone {
			outline: none;
			line-height: 50rpx;
			font-size: 36rpx;
			border: 1px solid #fff;
			&::after {
				display: none;
			}
		}
		.itembox {
			width: 100%;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			background-color: #fff;
			border-bottom: 1px solid #f5f5f5;
			margin: 10rpx 0;
			.title {
				flex: 1;
				display: flex;
				align-items: center;
				font-size: 36rpx;
				.icon {
					width: 100rpx;
					text-align: center;
					color: green;
					text {
					
						
					}
				}
			}
			.jiantou {
				width: 60rpx;
				text-align: center;
				color: #aaa;
			}
		}
	}
	.pop {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		background-color: #fff;
		text-align: center;
		font-size: 30rpx;
		.phone {
			padding: 40rpx 0;
			display: flex;
			height: 40rpx;
			line-height: 40rpx;
			align-items: center;
			justify-content: center;
			width: 100%;
			text {
				color: green;
			}
		}
		.btn {
			width: 100%;
			button {
				width: 500rpx;
				font-size: 24rpx;
			}
		}
	}
</style>
